body,ul{
	padding: 0;
	margin: 0;
}

.sidebar_box{
	position: fixed;
	height: 100%;
}

.sidebar,.btn_close,.content,.nav_content{
	position: absolute;
}

.sidebar,.btn_close{
	z-index: 99;
}

.sidebar,.sidebar_item{
	width: 50px;
}

.sidebar{
	height: 100%;
	padding-top: 160px;
	list-style: none;
	background-color: #eee;
	-webkit-transition: transform .5s linear;
	-moz-transition: transform .5s linear;
	-o-transition: transform .5s linear;
	transition: transform .5s linear;
}

.sidebar_move_left{
	-webkit-transform: translate(-60px);
	-moz-transform: translate(-60px);
	-o-transform: translate(-60px);
	transform: translate(-60px);
}

.sidebar_move_right{
	-webkit-transform: translate(0);
	-moz-transform: translate(0);
	-o-transform: translate(0);
	transform: translate(0);
}

.sidebar_item,.btn_close{
	cursor: pointer;
}

.sidebar_item{
	height: 50px;
	padding-top: 5px;
	margin-bottom: 10px;
	text-align: center;
}

.btn_close{
	left: 15px;
	bottom: 30px;
	opacity: .6;
	-webkit-transition: transform .5s linear;
	transition: transform .5s linear;
}

.close_move_left{
	-webkit-transform: translate(0px) scale(1) rotate(-225deg);
	transform: translate(0px) scale(1) rotate(-225deg);
}

.close_move_right{
	-webkit-transform: translate(90px) scale(1.5) rotate(225deg);
	transform: translate(90px) scale(1.5) rotate(225deg);
}

.content,.nav_content{
	width: 300px;
	height: 100%;
}

.nav_content{
	top: 100%;
	left: 50px;
	opacity: 0;
	background-color: #aaa;
}

.content_move_left{
	-webkit-animation: move_left .5s linear forwards;
	animation: move_left .5s linear forwards;
}

.content_move_right{
	-webkit-animation: move_right .5s linear forwards;
	animation: move_right .5s linear forwards;
}

.content_move_up{
	-webkitanimation: move_up .5s .3s linear forwards;
	animation: move_up .5s .3s linear forwards;
}

@-webkit-keyframes move_left{
	from{
	}
	1%{
		opacity: 1;
		transform: translate(0px,-100%);
	}
	99%{
		opacity: 0;
		transform: translate(-350px,-100%);
	}
	to{
		transform: translate(0,0);
	}
}

@keyframes move_left{
	from{
	}
	1%{
		opacity: 1;
		transform: translate(0px,-100%);
	}
	99%{
		opacity: 0;
		transform: translate(-350px,-100%);
	}
	to{
		transform: translate(0,0);
	}
}

@-webkit-keyframes move_right{
	from{
	}
	1%{
		opacity: 0;
		transform: translate(-350px,-100%);

	}
	to{
		opacity: 1;
		transform: translate(0px,-100%);
	}
}

@keyframes move_right{
	from{
	}
	1%{
		opacity: 0;
		transform: translate(-350px,-100%);

	}
	to{
		opacity: 1;
		transform: translate(0px,-100%);
	}
}

@-webkit-keyframes move_up{
	from{
	}
	to{
		opacity: 1;
		transform: translate(0px,-100%);
	}
}

@keyframes move_up{
	from{
	}
	to{
		opacity: 1;
		transform: translate(0px,-100%);
	}
}